<template>
  <div class="box">
    <CubeView
      :jsonData="jsonData"
      :cloumnData="cloumnData"
      @pointClick="pointClick"
    ></CubeView>
  </div>
</template>

<script>

let jsonData = []
let cloumnData = [4, 5, 4]
let list = []

for (let i = 0; i < cloumnData[0]; i++) {
  for (let j = 0; j < cloumnData[1]; j++) {
    for (let k = 0; k < cloumnData[2]; k++) {
      let data = Math.ceil(Math.random() * 1000) - 500
      list.push(i + 1, j + 1, k + 1, data)
    }
  }
}

for (let i = 0; i < list.length; i += 4) {
  jsonData.push([list[i], list[i + 1], list[i + 2], list[i + 3]])
}

export default {
  name: 'HelloWorld',
  components: {
    CubeView: () => import('./CubeView')
  },
  data () {
    return {
      cloumnData,
      jsonData,
    }
  },
  methods: {
    // 数据点点击事件
    pointClick (data) {
      alert(`点击了第${data[0]}层，第${data[1]}行，第${data[2]}列，数据是${data[3]}`)
    }
  }
}
</script>

<style scoped>
.box {
  width: 2000px;
  height: 1000px;
}
</style>
